<template>
  <el-scrollbar class="scrollbar-handle">
    <el-form status-icon label-width="100px" ref="firstForm" :rules="rules" :model="formEntity">
      <el-row>
        <el-col :span="24" :sm="24" :lg="12">
          <el-form-item label="旧密码" prop="OldPwd">
            <el-input v-model="formEntity.OldPwd" placeholder="请输入" clearable show-password></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" :sm="24" :lg="12">
          <el-form-item label="新密码" prop="Pwd">
            <el-input v-model="formEntity.Pwd" placeholder="请输入" clearable show-password></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" :sm="24" :lg="12">
          <el-form-item label="重复新密码" prop="RepPwd">
            <el-input v-model="formEntity.RepPwd" placeholder="请输入" clearable show-password></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" :sm="24" :lg="1" :offset="11">
          <el-button type="primary" v-form-validate="formSubmit" :loading="loading">保 存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-scrollbar>
</template>

<script>
import { UserCenter } from "@/api";

export default {
  data() {
    return {
      //存放表单ref数组
      formArr: ["firstForm"],
      //表单实体
      formEntity: {},
      //表单验证规则（规则键必须和表单键一致）
      rules: {
        OldPwd: [
          {
            validator: (rule, value, callback) => {
              if (value === "" || value === undefined) {
                callback(new Error("请输入旧密码"));
              } else {
                this.loading = true;
                //转 MD5 32位 小写
                let OldPwd = this.util.md5(value);
                //发起请求验证
                UserCenter.ValidateOldPwd(OldPwd)
                  .then(res => {
                    callback();
                    this.loading = false;
                  })
                  .catch(err => {
                    callback(new Error("密码错误，请重新输入！"));
                    this.loading = false;
                  });
              }
            },
            trigger: "blur"
          }
        ],
        Pwd: [
          {
            validator: (rule, value, callback) => {
              if (value === "" || value === undefined) {
                callback(new Error("请输入新密码"));
              } else {
                if (this.formEntity.RepPwd !== "") {
                  this.$refs["firstForm"].validateField("RepPwd");
                }
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        RepPwd: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请确认新密码"));
              } else if (value !== this.formEntity.Pwd) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      },
      //加载中
      loading: false
    };
  },
  methods: {
    //表单提交
    formSubmit() {
          //验证通过
          UserCenter.RevisePassword({
            OldPwd: this.util.md5(this.formEntity.OldPwd),
            Pwd: this.util.md5(this.formEntity.Pwd)
          }).then(res => {
            this.loading = true;
            //1.5S后跳转到登录界面
            setTimeout(() => {
              this.$store.dispatch('Logout');
            }, 1000);
          });
    }
  }
};
</script>